<template>
	<view class="activity">
		<view class="tabbar">
			<tab-bar :type="type"></tab-bar>
		</view>
		<view class="getHeight" style="position: sticky; width: 100%; background: #f4f5f9; top: 0">
			<view class="header_box h100 flex">
				<view :class="[navIndex == index ? 'txt_name_active' : '', 'txt_name', 's30', 'familytow', 'fblod']" v-for="(item, index) in navList" :key="index" @click="onActive(index)">
					{{ item.name }}
				</view>
				<image class="w100 h100" style="position: absolute; height: 104upx; widht: 750upx" :src="[navIndex == 0 ? '../static/hd_right.png' : '../static/hd_left.png']"></image>
			</view>
			<view class="search_max_box flex flexjus" style="background-color: #fff" v-if="navIndex === 0">
				<view class="serch_max_list flex" v-for="(item, index) in screen_list" :key="index" @click="searchActive(index)">
					<view :class="[searchIndex === index ? 'serch_title_active' : 'search_title', 's26', 'f400', 'family']">
						{{ item.txt }}
					</view>
					<view class="search_icon">
						<image class="search_icon_img" :src="item.img"></image>
					</view>
				</view>
			</view>
			<template v-if="navIndex === 1">
				<view class="content_box w100">
					<scroll-view class="scroll-view_H flex" scroll-x="true">
						<view
							:class="[timeIndex == index ? 'date_time' : 'date_time_active']"
							v-for="(item, index) in timeList"
							:key="index"
							@click="active(index, item.starttime, item.endtime)"
						>
							<view class="top_txt flex s26 family f500 txtali">{{ item.time }}</view>
							<view class="botom_txt txtali">{{ item.status }}</view>
						</view>
					</scroll-view>
					<view class="screen_box">
						<view class="screen_list_box flex">
							<view class="list_box flex" v-for="(item, index) in screen_list" :key="index" @click="onActive1(index)">
								<view :class="[listIndex == index ? 'active_txt' : '', 'txt s24 f500 family']">
									{{ item.txt }}
								</view>
								<image class="img" :src="item.img"></image>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<block v-if="navIndex == 1">
			<view class="content_box w100">
				<block v-for="(item, index) in list" :key="index" @click="go_goods_detail(item.sku.id)">
					<view class="goods_box flex">
						<view class="goods_image_box">
							<image class="w100 h100" :src="item.sku.thumbnail ? item.sku.thumbnail : item.image_src"></image>
						</view>
						<view class="goods_detail_box">
							<view class="goods_name family s32 f500">{{ item.sname }}</view>
							<view class="goods_price s24 f500 family">原价￥{{ item.market_price }}</view>
							<view class="goods_price_btn flexjus">
								<view class="goods_xianjia s40 familytow fblod">
									<text class="s16 f500 family">￥</text>
									{{ item.sku.price || item.price }}
								</view>
								<view
									class="goods_btn s28 fblod familytow txtali"
									:style="currentTime > item.endtime ? 'background:#666;' : ''"
									@click.stop="go_goods_detail(item.sku.id, item.btnStatus)"
								>
									{{ item.btnStatus }}
								</view>
							</view>
						</view>
					</view>
					<view class="line_box"></view>
				</block>
			</view>
		</block>
		<block v-if="navIndex == 0">
			<view class="right_box w100" v-for="(item, index) in list" :key="index" @click="go_goods_detail(item.id)">
				<view class="t_goods_box" v-if="item.abatement || item.discount">
					<view class="goods_list_box flex">
						<view class="t_goods_image">
							<image class="w100 h100" :src="item.image_src"></image>
						</view>
						<view class="t_goods_detail">
							<view class="t_goods_name s32 family f500">{{ spceType(item.title, item.difference, item.spec_type) }}</view>
							<view v-if="item.discount_type == 'reduction'" class="juan_parice flex" style="margin-top: 20rpx">
								<view class="j_left_txt s24 familytow fblod">券后价￥</view>
								<view class="j_right_txt s40 familytow fblod">{{ item.price }}</view>
							</view>
							<view v-if="item.discount_type == 'discuont'" class="juan_parice flex" style="margin-top: 20rpx">
								<view class="j_left_txt s24 familytow fblod">折后价￥</view>
								<view class="j_right_txt s40 familytow fblod">{{ item.price }}</view>
							</view>
							<view class="back_image_box flexjus">
								<view v-if="item.discount_type == 'reduction'" class="left_back_box s36 familytow fblod txtali">
									<text class="s24 familytow fblod">￥</text>
									{{ item.abatement }}
								</view>
								<view v-if="item.discount_type == 'discuont'" class="left_back_box s36 familytow fblod txtali">
									<text class="s24 familytow fblod"></text>
									{{ item.discount }}折
								</view>
								<view class="right_back_box s28 familytow fblod txtali">去抢购</view>
							</view>
						</view>
					</view>
					<view class="line_box"></view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
import screenList from '@/components/screen.vue';
export default {
	components: {
		screenList
	},
	data() {
		return {
			type: 'four',
			navList: [
				{
					name: '优惠商品'
				},
				{
					name: '商品秒杀'
				}
			],
			screen_list: [
				{
					img: '/static/shopping/jiage.png',
					txt: '价格排序'
				},
				{
					img: '/static/shopping/zuixin.png',
					txt: '最新上架'
				},
				{
					img: '/static/shopping/pingfen.png',
					txt: '人气爆款'
				},
				{
					img: '/static/shopping/renqi.png',
					txt: '评分最高'
				}
			],
			navIndex: 0,
			timeIndex: 0,
			list: [],
			timeList: [],
			starttime: -1,
			endtime: -1,
			flag: true,
			flag1: true,
			listIndex: 0,
			searchIndex: 0,
			currentTime: 0,
			height1: 0, //固定内容高度
			page: 1,
			totalPage: 1
		};
	},
	onLoad(options) {
		let date = new Date().getTime();
		let number = date / 1000;
		this.currentTime = number.toFixed(0);
		this.navIndex = options.type || 0;
		this.getList();
		// this.$nextTick((res) => {
		// 	const query = uni.createSelectorQuery().in(this);
		// 	query
		// 		.select('.getHeight')
		// 		.boundingClientRect((data) => {
		// 			this.height1 = data.height;
		// 		})
		// 		.exec();
		// });
	},
	onReachBottom() {
		this.page++;
		if (this.page > this.totalPage) return this.$wanlshop.msg('我是有底线的');
		if (this.navIndex) {
			this.getDataList();
		} else {
			this.getList();
		}
	},
	methods: {
		getList() {
			uni.showLoading({
				title: '数据请求中···'
			});
			this.$request({
				url: this.navIndex ? 'product/seckills' : 'shop/getDiscountActivitys',
				method: 'POST',
				data: {
					shop_id: this.$store.state.shop.id,
					starttime: -1
				}
			}).then((res) => {
				// setTimeout(() => {
				// 	this.$nextTick((res) => {
				// 		const query = uni.createSelectorQuery().in(this);
				// 		query
				// 			.select('.getHeight')
				// 			.boundingClientRect((data) => {
				// 				console.log(data.height);
				// 				this.height1 = data.height;
				// 			})
				// 			.exec();
				// 	});
				// }, 0);
				const { code, data, msg } = res.data;
				if (code == 1) {
					this.list = [];
					if (!this.navIndex) {
						this.list = data;
					} else {
						data.date.unshift({
							time: '全部秒杀',
							status: '已开始',
							starttime: -1
						});
						this.timeList = data.date;
						this.getDataList();
					}
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
				uni.hideLoading();
			});
		},
		//获取秒杀商品接口请求
		getDataList() {
			uni.showLoading({
				title: '数据请求中···'
			});
			const ind = this.listIndex;
			this.$request({
				url: 'product/seckill_list',
				method: 'POST',
				data: {
					shop_id: this.$store.state.shop.id,
					sort: ind == 0 ? 'price' : ind == 1 ? 'updatetime' : ind == 2 ? 'views' : 'praise',
					order: this.flag ? 'asc' : 'desc',
					starttime: this.starttime,
					endtime: this.endtime,
					page: this.page
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					this.list = data.data;
					this.list.forEach((item) => {
						item.sname = this.spceType(item.title, item.sku.difference, item.sku.spec_type);
						if (this.currentTime > item.endtime) {
							item.btnStatus = '已结束';
						} else if (this.currentTime < item.starttime) {
							item.btnStatus = '未开始';
						} else if (this.currentTime < item.endtime && this.currentTime > item.starttime) {
							item.btnStatus = '去抢购';
						}
					});
					this.flag = !this.flag;
					this.totalPage = data.last_page;
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
				uni.hideLoading();
			});
		},
		//优惠商品和商品秒杀切换
		onActive(ind) {
			this.navIndex = ind;
			this.page = 1;
			this.getList();
		},
		//商品秒杀排序
		onActive1(ind) {
			this.listIndex = ind;
			this.page = 1;
			this.getDataList();
		},
		// 日期时间切换
		active(ind, starttime, endtime) {
			this.timeIndex = ind;
			this.starttime = starttime;
			this.endtime = endtime;
			this.page = 1;
			this.getDataList();
		},
		//优惠商品排序
		searchActive(ind) {
			this.searchIndex = ind;
			this.page = 1;
			this.getList();
		},
		go_goods_detail(id, name) {
			if (name == '已结束')
				return uni.showToast({
					title: '当前商品秒杀活动已结束，请看看其他商品吧！',
					icon: 'none'
				});
			uni.navigateTo({
				url: `/pages/filePages/goodsDetail/goodsDetail?sku_id=${id}&type=0&id=${id}`
			});
		}
	}
};
</script>

<style scoped lang="scss">
.activity {
	padding-bottom: 150upx;

	.tabbar {
		position: absolute;
	}

	.search_max_box {
		padding: 32upx 40upx 0 28upx;
		box-sizing: border-box;
		align-items: center;

		.serch_max_list {
			align-items: center;

			.search_title {
				color: #999999;
			}

			.serch_title_active {
				color: #333333;
			}

			.search_icon {
				width: 32upx;
				height: 32upx;
				margin-left: 4upx;

				.search_icon_img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.header_box {
		height: 104upx;

		.txt_name {
			width: 400rpx;
			height: 104rpx;
			color: #999999;
			line-height: 104rpx;
			text-align: center;
			position: relative;
			z-index: 99;
		}

		.txt_name:nth-child(2) {
		}

		.txt_name_active {
			color: #000000;
		}
	}

	.content_box {
		background: #fff;
		overflow: hidden;

		.scroll-view_H {
			margin-top: 42upx;
			width: 100%;
			white-space: nowrap;

			.date_time {
				height: 76upx;
				background: #ebbe87;
				border-radius: 16upx;
				margin-left: 32upx;
				display: inline-block;
				padding: 0 12upx 0 12upx;

				.top_txt {
					margin-top: 8upx;
					color: #844902;
				}

				.botom_txt {
					font-size: 16upx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #844902;
					margin-top: 4upx;
				}
			}

			.date_time_active {
				height: 76upx;
				background: #ffffff;
				border-radius: 16upx;
				margin-left: 32upx;
				display: inline-block;
				padding: 0 12upx 0 12upx;

				.top_txt {
					margin-top: 8upx;
					color: #999999;
				}

				.botom_txt {
					font-size: 16upx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #e96969;
					margin-top: 4upx;
				}
			}
		}

		.screen_box {
			margin-top: 30upx;
			padding-bottom: 20rpx;
			.screen_list_box {
				margin-left: 46upx;
				.list_box {
					margin-left: 53upx;

					.txt {
						color: #999999;
					}

					.active_txt {
						color: #333333;
					}

					.img {
						width: 32upx;
						height: 32upx;
						display: inline-block;
						margin-left: 4upx;
					}
				}

				.list_box:nth-child(1) {
					margin-left: 0;
				}
			}
		}

		.goods_box {
			width: 686upx;
			margin: 44upx auto;

			.goods_image_box {
				width: 170upx;
				height: 170upx;
				border-radius: 8upx;
				overflow: hidden;
			}

			.goods_detail_box {
				width: 500upx;
				margin-left: 20upx;

				.goods_name {
					width: 414upx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.goods_price {
					margin-top: 20upx;
					color: #999999;
					text-decoration: line-through;
				}

				.goods_price_btn {
					margin-top: 6upx;

					.goods_xianjia {
						color: #ff3f4a;
						margin-top: 16upx;
					}

					.goods_btn {
						width: 152upx;
						height: 68upx;
						background: #ff3f4a;
						border-radius: 50upx;
						color: #ffffff;
						line-height: 68upx;
						margin-left: 212upx;
					}
				}
			}
		}

		.line_box {
			width: 686upx;
			height: 2upx;
			background-color: #f4f4f4;
			margin: 40upx auto;
			margin-bottom: 10upx;
		}
	}

	.right_box {
		background-color: #ffffff;
		overflow: hidden;

		.line_box {
			width: 686upx;
			height: 2upx;
			background-color: #f4f4f4;
			margin: 40upx auto;
			margin-bottom: 10upx;
		}

		.screen_box {
			margin-top: 30upx;
		}

		.t_goods_box {
			width: 686upx;
			padding-left: 32upx;
			padding-right: 32upx;
			background-color: #ffffff;
			margin-top: 20upx;

			.goods_list_box {
				height: 200upx;

				.t_goods_image {
					width: 200upx;
					height: 200upx;
					border-radius: 8upx;
					overflow: hidden;
				}

				.t_goods_detail {
					margin-left: 16upx;
					display: flex;
					flex-direction: column;

					.t_goods_name {
						width: 414upx;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.juan_parice {
						flex: 1;

						.j_left_txt {
							color: #ff3f4a;
							margin-top: 16upx;
						}

						.j_right_txt {
							color: #ff3f4a;
						}
					}

					.back_image_box {
						margin-top: 10upx;

						.left_back_box {
							width: 306upx;
							height: 68upx;
							background-image: url('');
							background-size: 100% 100%;
							border-radius: 8upx;
							line-height: 70upx;
							color: #ff3f4a;
						}

						.left_back_box::after {
							content: '优惠券';
							font-size: 24upx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #ff3f4a;
							margin-left: 6upx;
						}

						.right_back_box {
							width: 154upx;
							height: 68upx;
							background-image: url('');
							background-size: 100% 100%;
							border-radius: 8upx;
							margin-left: 6upx;
							line-height: 68upx;
							color: #ffffff;
						}
					}
				}
			}
		}
	}
}
</style>
<style>
page {
	background-color: #f4f5f9;
}
</style>